<template>
    <div>
        <el-upload
                class="upload-demo"
                drag
                :auto-upload="false"
                :http-request="myupload"
                :before-upload="beforeAvatarUpload"
                ref="my"
                multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">视频不能超过500M</div>
        </el-upload>
        <submit-img class="img" ref="submitImg"></submit-img>

        <el-input
                type="textarea"
                autosize
                placeholder="请输入视频名字"
                v-model="textarea1">
        </el-input>
        <div style="margin: 20px 0;"></div>
        <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入视频描述"
                v-model="textarea2">
        </el-input>
        <div class="videoType">
            <el-dropdown @command="handleCommand" class="type">
                <el-button type="info">
                    {{type}}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="java">java</el-dropdown-item>
                    <el-dropdown-item command="web">web</el-dropdown-item>
                    <el-dropdown-item command="python">python</el-dropdown-item>
                    <el-dropdown-item command="C/C++">C/C++</el-dropdown-item>
                    <el-dropdown-item command="其他">其他</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <div class="paywidth">
            <el-dropdown @command="handleCommand2" class="type">
                <el-button type="info">
                    {{quanxain}}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="0">免费</el-dropdown-item>
                    <el-dropdown-item command="1">VIP</el-dropdown-item>
                    <el-dropdown-item command="2">收费</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <input type="text"  class="inputPay"  @input="handleInput" v-model="pay" placeholder="输入视频价格" v-if="showPay">
        <el-button class="submit" type="primary" @click="uploading">提交</el-button>
        <el-button
                style="position: fixed; left: -1000px"
                @click="openFullScreen1"
                v-loading.fullscreen.lock="isUpLoading"
                element-loading-text="上传中"
                >
        </el-button>
    </div>
</template>




<script>
    import {request} from "../../network/request";
    import submitImg from "./submitImg";
    export default {
        name: "submitVideo",
        data() {
            return {
                textarea1: '',
                textarea2: '',
                type:"选择视频分类",
                size : 0,
                quanxain:"选择视频权限",
                quanxianmsg:["免费", "vip视频", "收费视频"],
                showPay:false,
                pay:'',
                jur:0,
                isUpLoading: false
            };
        },
        methods: {
            openFullScreen1() {
                this.fullscreenLoading = true;
                setTimeout(() => {
                    this.fullscreenLoading = false;
                }, 2000);
            },
            handleInput(e){
                this.pay = e.target.value.replace(/[^\d]/g,'');

            },
            handleCommand(command) {
                console.log(command);
                this.type = command;
            },
            handleCommand2(command){
                this.quanxain = this.quanxianmsg[command];
                this.jur = command;
                if(command == 2){
                    this.showPay = true;
                }else{
                    this.showPanelColor = false;
                }
            },
            uploadReady(){
                this.$refs.submitImg.uploading();
                let k = this;
                setTimeout(function () {
                   // console.log(sessionStorage.getItem("videoImgUrl"));
                    k.$refs.my.submit();
                }, 1000)

            },
            uploading() {
               if(this.textarea1 == '' || this.textarea2 == ''){
                   this.$message.error("输入内容不能为空");
               }else if(this.type == "选择视频分类"){
                   this.$message.error("选择视频分类");
               }else{
                   this.uploadReady();
               }

            },
            myupload(content) {
                //console.log(content.file)
                let myformData = new FormData()
                let id = parseInt(sessionStorage.getItem("userId"));
                let time = new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate() + " " + new Date().getHours() +'时' + new Date().getMinutes()+"分";
                let userName = sessionStorage.getItem("nickName");
                let size = this.size;
                let type = this.type;
                let des = this.textarea2;
                let name = this.textarea1;
                let imgUrl = sessionStorage.getItem("videoImgUrl");
                let pay = this.pay;
                if(this.pay == '') {
                    pay = 0
                }else{
                    pay = parseInt(this.pay);
                }
                size = Math.floor(size);
                myformData.append('file', content.file);
                myformData.append("userName", userName);
                myformData.append("size", size);
                myformData.append("type", type);
                myformData.append("time", time);
                myformData.append("des", des);
                myformData.append("name", name);
                myformData.append("imgUrl", imgUrl);
                myformData.append("id", id);
                myformData.append("jur", parseInt(this.jur));
                myformData.append("pay", pay);
                this.isUpLoading = true;
                request({
                    url: "/fileUploadVideo",
                    method: "post",
                    data: myformData,

                }).then(res => {
                    this.isUpLoading = false;
                    console.log(res.data);
                    this.$message({
                        message: '上传成功， 马上进行页面跳转',
                        type: 'success'
                    });
                    let k = this;
                    setTimeout(function () {
                        k.$router.replace("/video");
                    }, 3000)

                }).catch(err => {
                    //alert(err);
                    console.log(err);
                });
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 500;
                this.size = file.size / 1024 / 1024;
                if (!isLt2M) {
                    this.$message.error('上传视频大小不能超过 500MB!');
                }
                return isLt2M;
            },

        },
        components:{
            submitImg
        },
        created() {

        }

    }
</script>

<style scoped>
    .paywidth{
        width: 150px;
        display: inline-block;
    }
    .inputPay{
        position: absolute;
        margin-left: 10px;
        margin-top: 20px;
        border: 1px solid #9c9c9c;
        height: 40px;
        border-radius: 5px;
        padding-left: 5px;
    }
    .inputPay:focus{
        border-color: #00b0ff;
        outline: none;
    }
    .videoType{
        width: 150px;
        display: inline-block;
    }
    .el-dropdown {
        vertical-align: top;
    }
    .el-dropdown + .el-dropdown {
        margin-left: 15px;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .submit{
        margin-top: 20px;
        display: block;
    }
    .img{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .upload-demo{
        margin-top: 20px;
    }

    .type{
        margin-top: 20px;
    }
</style>